js中如何优雅的替代 if

2024-02-26 19:36| 来源: 网络整理| 查看: 265

前言

今天，朋友跟我讲述了一个问题，说他在开发一个需求时遇到了很多个条件判断的情况，感觉自己写出来的代码很糟糕。其实在我们的开发过程中，总是不可避免的会遇到这样的多 if 条件判断或多重 if-else 嵌套的问题，导致代码写出来变得很糟糕。我个人也遇到过很多次这样的情况，所以针对这个问题做了一些总结，通过这些技巧能够让我们使用一种更加优雅的方式替代丑陋的 if-else（包括 switch 语句，个人认为 switch 语句过长时也是相当糟糕的）。

优雅的方式

接下来，根据几种经常遇到的场景，逐一用较优雅的方式替代。

用 return 替代 if-else

场景：互斥的条件判断修改前：

function test(data) { let result = ''; if (data < 10) { result = 'if'; } else { result = 'else'; } return result; }

像上面的代码我们需要采用 if-else 进行两种互斥的条件判断，其实通过合理的使用 return，可以去掉if-else 判断。

修改后：

function test(data) { let result = ''; if (data < 10) { return (result = 'if'); } return (result = 'else'); } 使用 Array 的 includes 方法

场景：多种条件对应相同的处理修改前：

在上面的场景中，我们通过在 if 语句中使用 || 对多种条件进行相同的处理，显而易见，这样的代码很糟糕（尤其是 province === "广东"|| province === "广西"|| province === "福建" || province === "浙江" || province === "云南这一大串）这种场景我们其实可以通过 Array 的 includes 方法来规避。

修改后：

function region(province) { let result = ''; let northProvinceArr = ['河北', '黑龙江', '辽宁', '山东', '吉林']; let southProvinceArr = ['广东', '广西', '福建', '浙江', '云南']; if (southProvinceArr.includes(province)) result = '南方'; if (northProvinceArr.includes(province)) result = '北方'; }

通过这样的处理，我们的最终代码变得好看了许多。

策略模式

场景：并列的多条件判断修改前：

这段代码中我们就是采用 if-else 的方式判断多个不同的条件，不过这种多条件的判断你可能会采用 switch 语句：

这种写法虽然使代码清晰了许多，但是个人觉得依旧不合格，接下来我们看看采用策略模式后的结果。

修改后：

function permission(role) { const actions = { operations: getOperationPermission, admin: getAdminPermission, superAdmin: getSuperAdminPermission, user: getUserPermission, }; actions[role].call(); }

比起前面两种写法，显然采用策略模式要更加优雅。

对象数组

场景：多条件嵌套多分支判断当我们遇到需要进行多个条件判断，同时每个条件内又需要判断多个子条件时，代码处理起来是最棘手的。一旦处理不好，代码就会变得无比糟糕。

修改前：

当遇到这种情况时，采用对象数组的方式能够得到较好的优化效果。

修改后：

在这里也顺便提一下三元表达式，在某些情境下，使用三元表达式实现条件判断会是个不错的选择，它可以让代码更加简洁（虽然在我看来，它跟 if-else 本质上没太大区别）。

修改前：

if(a>0){ a+=1; }else{ a-=1 }

修改后：

a>0? a+=1 : a-=1;

不过，太多复杂的条件判断时，使用三元表达式则会适得其反。

结尾

以上所介绍的技巧，主要是为了让你掌握它们的一些思路，具体的应用需要结合实际的业务场景进行分析，然后采取最优的策略写出更加优雅的代码。最后，希望我的分享能够对你有所帮助！

【本文地址】

公司简介

联系我们